<template>
        <div class="table-tree" v-loading="loading" 
        element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 1)"
        > 
            <table-tree 
            :data='goodsCate'
             ref='goodsTable'
             :columns='columns'
             :show-index='true'
             :border='true'
             :selection-type='false'
             :expand-type='false'
               
    
             >
             <template #isok='{row}'>
                    <i class="el-icon-success" style="color:lightgreen" v-if="row.cat_deleted===false"></i>
                    <i class="el-icon-error" style="color:red" v-else></i>
             </template>
              <template #sort='{row}'>
                   <el-tag :type="['primary','success','warning'][row.cat_level]">{{row.cat_level+1}}级</el-tag>
             </template>
              <template #handle='{row}'>
                   
            <!-- 编辑角色 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="editRoleInfo(row)"
              >编辑</el-button
            >
            <!-- 删除分类 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deleteCategory(row)"
              >删除</el-button
            >
             </template>
            </table-tree>
            <el-pagination
      @current-change="handleCurrentChange"
      :page-size="5"
      layout="total, prev, pager, next, jumper"
      :total="40">
    </el-pagination>
   <!-- 添加分类对话框 -->
   <add-category @addCategorySuccess='regainGoodsCate'></add-category>
   <!-- 编辑对话框 -->
  <el-dialog
  title="编辑分类"
  :visible.sync="showEditCategoryDialog"
  width="50%"
  @closed='cancelEdit'
  >
     <el-form :model='editCategoryForm'  label-width='80px' ref='editCategoryForm' >
    <el-form-item label='分类名称' prop='catName' :rules="[{required:true,message:'新名称不能为空',trigger:'blur'}]">
        <el-input v-model="editCategoryForm.catName" ></el-input>
    </el-form-item>
 
   
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="showEditCategoryDialog=false">取 消</el-button>
    <el-button type="primary" @click="submitNewCategoryName">确 定</el-button>
  </span>
</el-dialog>
        </div>
</template>

<script>
import {getGoodsCate,editSubmitCategoryName,confirmDeleteCategory} from 'network/axios'
import AddCategory from './AddCategory'
export default {
        name:'TreeTable',
        components:{AddCategory},
        data(){
            return {
                goodsCate:[],
                columns:[
                    {
                        label:'分类名称',
                        prop:'cat_name'
                    },
                    {
                        label:'是否有效',
                        type:'template',
                       template:'isok'
                    },
                    {
                        label:'排序',
                        type:'template',
                       template:'sort'
                    },
                    {
                        label:'操作',
                        type:'template',
                       template:'handle'
                    }
                ],
                params:{
                    type:3,
                    pagenum:1,
                    pagesize:5
                },
                //编辑对话框的表单属性
                editCategoryForm:{
                        catName:''
                },
                //旧的分类名称,主要是与新的名称去做比对,看用户有没有修改过名称
                oldCatName:'',
                //编辑对话框的显示与隐藏
                showEditCategoryDialog:false,
                //编辑提交时要发送给后端的信息
                editCategoryInfo:{
                            name:'',
                            id:''
                },
                //表格加载动画
                loading:true
            }
        },
        created(){
            this.getCateList(this.params)
        },
        methods:{
                getCateList(params){
                    getGoodsCate(params).then(res=>{
                        this.goodsCate=res.data.data.result
                        this.loading=false
                    })
                },
                handleCurrentChange(pagenum){
                            this.params.pagenum=pagenum
                            this.getCateList(this.params)
                },
                regainGoodsCate(){
                    this.getCateList(this.params)
                },
                //点击编辑按钮所触发的函数,1.显示对话框2.获取到分类的名称3.把改分类的id保存下来,提交的时候要用到
                editRoleInfo(categoryInfo){
                               
                            this.editCategoryForm.catName=categoryInfo.cat_name
                            this.oldCatName=categoryInfo.cat_name
                            this.showEditCategoryDialog=true
                            this.editCategoryInfo.id=categoryInfo.cat_id
                            

                },
                //点击确认按钮提交新分类信息,此时要判断一下用户有没有做过修改有做过修改就不让通过
              submitNewCategoryName(){
                  if(this.oldCatName==this.editCategoryForm.catName){
                      this.$message.warning('您并没有做过任何修改哦!')
                  }else{
                      this.$refs.editCategoryForm.validate(flag=>{
                          if(!flag){
                              this.$message.error('请根据提示输入有效的信息后再点击提交')
                          }else{
                                editSubmitCategoryName({
                                    id:this.editCategoryInfo.id,
                                    name:this.editCategoryForm.catName
                                }).then(res=>{
                                   if(res.data.meta.status!=200){
                                       this.$message.error('更新失败')
                                   }else{
                                       this.$message.success('更新成功')
                                       this.showEditCategoryDialog=false
                                       this.getCateList(this.params)
                                   }
                                })
                          }
                      })
                  }
              },
              //关闭对话框1.提示用户2.重置所有的值
              cancelEdit(){
                  this.$message('您取消了编辑操作')
                  this.$refs.editCategoryForm.resetFields()
              },
              //删除角色
                deleteCategory(row) {
      this.$confirm("删除之后不可恢复,确定要删除该分类吗?", "确认信息", {
        confirmButtonText: "确认删除",
        cancelButtonText: "点错了",
      })
        .then(() => {
          confirmDeleteCategory(row.cat_id).then((res) => {
            if (res.data.meta.status != 200)
              return this.$message.error("删除失败");
            this.$message.success("删除成功");
            this.getCateList(this.params)
          });
        })
        .catch(() => {
          this.$message("您取消了删除操作");
        });
    }
        }
    
}
</script>

<style scoped>
        .table-tree{
                margin-top:20px;
                height: 300px;
        }
</style>